Skip to main content

Grid layout

Every template & some components have a grid that can be used to easily position & size elements on that template according to grid based design. This makes it possible to create responsive webpages.

Configuring the grid​

A grid can be configured by clicking the “view” (eye) button in the template navigation or by configuring the grid in the “style” tab of an element One can:

  • Toggle a grid on/off
  • Set an amount of columns
  • Set the Column gapsize
  • Set the Column color
  • Set the amount of rows
  • Set the row gapsize
  • Set the row color
  • Set the snap strength.

Grid components​

Grids can be set & used on templates, but also on some container elements such as:

  • Simple containers
  • Tab container
  • Accordion container
  • Stepper container

Positioning Elements​

Elements can be positioned according to a grid by using the grid “unit” for the x & y values of the elements.

For example the x: 1 grid will position the element to start on the second column of its parents grid.

The y: 1 grid will position the element to start on the second row of its parents grid.

Of course this can be reversed by either choosing “position: align right” or “position: align-bottom”.

Sizing Elements​

Elements can be sized according to a grid by using the following units for the x & values of the elements:

  • grid: This will size the element n-amount of columns/rows. For example w: 1 grid will make the elements width equal to 1 grid column, h: 1 grid will make the elements height equal to 1 grid row.
  • grid-end: This will size the element until it reaches the end of a certain column/row. For example w: 5 grid-end will set the width of the element as much as needed to end exactly on the end of the fifth grid column.
  • grid-start: This will size the element until it reaches the end of a certain column/row. For example w: 5 grid-start will set the width of the element as much as needed to end exactly on the start of the fifth grid column.